<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>开放区域设置</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  {include file="public/css"/}
    <script src="__STATIC__/admin/js/address3.js?v=1"></script>
    <style>
    .layui-form-label{width:130px!important}
    #ggtable .layui-input{ display:inline;height:30px}
    #ggtable .layui-btn{ margin-top:-3px;margin-left:1px}
    </style>
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-card layui-col-md12">
                <div class="layui-card-header">
                   开放区域模板
                </div>
                <div class="layui-card-body" pad15>
                    <div class="layui-form" lay-filter="">
                        <input type="hidden" name="info[id]" value="{$info['id']}">

                        <div class="layui-form-item" >
                            <label class="layui-form-label" ></label>
                            <div class="layui-input-inline" style="width:auto">
                                <div id="modal-areas" ></div>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block" style="margin-left:160px;">
                                <button class="layui-btn"   lay-submit lay-filter="formsubmit">提 交</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
    <style type='text/css'>
    .modal-areas .layui-layer-content{ position:static;overflow:visible;height:300px}
    .province { float:left; position:relative;width:210px; height:35px; line-height:35px;border:1px solid #fff;}
    .province:hover { border:1px solid #f7e4a5;border-bottom:1px solid #fffec6; background:#fffec6;}
    .province .cityall { margin-top:10px;}
    .province ul { list-style: outside none none;position:absolute;padding:0;background:#fffec6;border:1px solid #f7e4a5;display:none;width:auto; width:300px; z-index:999999;left:-1px;top:32px;}
    .province ul li  { float:left;min-width:60px;margin-left:20px; height:30px;line-height:30px; }
    </style>

    {include file="public/js"/}
    <script>
    var area = {$area?$area:'0'};
    $(function(){
        var regiondata = '';
        for(var i in provinceList){
            if(i>0){
                var province = provinceList[i];
                regiondata+='<div class="province">';
                regiondata+='           <label class="checkbox-inline" style="margin-left:20px;">';
                regiondata+='               <input type="checkbox" class="cityall" style="display:inline-block" province="'+province.name+'"/> '+province.name;
                regiondata+='               <span class="citycount" style="color:#ff6600"></span>';
                regiondata+='           </label>';
                if(province.cityList){
                    regiondata+='       <ul>';
                    for(var j in province.cityList){
                        var city = province.cityList[j];
                        regiondata+='       <li>';
                        regiondata+='           <label class="checkbox-inline">';
                        regiondata+='               <input type="checkbox" class="city" style="margin-top:8px;display:inline-block" city="'+city.name+'" /> '+city.name;
                        regiondata+='           </label>';
                        regiondata+='       </li>';
                    }
                    regiondata+='       </ul>';
                }
                regiondata+='</div>';
            }
        }
        $('#modal-areas').html(regiondata);

        $('.province').mouseover(function(){
            $(this).find('ul').show();
        }).mouseout(function(){
            $(this).find('ul').hide();
        });

        $('.cityall').click(function(){
            var checked = $(this).get(0).checked;
            var citys = $(this).parent().parent().find('.city');
            citys.each(function(){
                $(this).get(0).checked = checked;
            });
            var count = 0;
            if(checked){
                count =  $(this).parent().parent().find('.city:checked').length;
            }
            if(count>0){
                $(this).next().html("(" + count + ")")    ;
            }else{
                $(this).next().html("");
            }
        });

        $('.city').click(function(){
            var checked = $(this).get(0).checked;
            var cityall = $(this).parent().parent().parent().parent().find('.cityall');
            if(checked){
                cityall.get(0).checked = true;
            }
            var count = cityall.parent().parent().find('.city:checked').length;
            if(count>0){
                cityall.next().html("(" + count + ")")    ;
            }else{
                cityall.next().html("");
            }
        });
        setTimeout(function(){
            editArea(area);
        },400)
    })

    function editArea(area=''){
        if(area){
            for(var i in area){
                if(area[i] == ''){
                    continue;
                }
                var provincecity = area[i];
                $('input[province='+provincecity[0]+']').prop('checked',true);

                var citys = provincecity[1].split(',');
                var citycount = 0;
                for(var j in citys){
                    citycount++;
                    $('input[province='+provincecity[0]+']').parent().parent().find('.city[city='+citys[j]+']').prop('checked',true);
                }
                $('input[province='+provincecity[0]+']').next('.citycount').html('('+citycount+')');
            }
        }
    }
    var current = '';
    function clearSelects(){
        $('.city').attr('checked',false).removeAttr('disabled');
        $('.cityall').attr('checked',false).removeAttr('disabled');
        $('.citycount').html('');
    }

    layui.form.on('submit(formsubmit)', function(obj){
        var citystrs = '';
        $('.cityall:checked').each(function(){
            var citychecked = [];
            $(this).parent().parent().find('.city:checked').each(function(){
                citychecked.push($(this).attr('city'));
            });
            citystrs+=$(this).attr('province') + '-'+citychecked.join(',') + ';';
        })

        var field = obj.field;
        field['citys'] = citystrs;
        var index = layer.load();
        $.post("{:url('save')}",field,function(data){
            layer.close(index);
            dialog(data.msg,data.status,data.url);
        })
    })
  </script>
    {include file="public/copyright"/}
</body>
</html>